import React from 'react';
import './SnapShotSample.css';

class SnapshotSample extends React.Component<any, { messages: string[] }> {
    timeID: number | undefined;
    rootNode: any;
    constructor(props: any) {
        super(props);
        this.state = {
            messages: [],//用于保存子div
        }
    }

    handleMessage() {//用于增加msg
        this.setState(pre => {
            return ({
                messages: [`msg: ${pre.messages.length}`, ...pre.messages],
            })
        })
    }
    componentDidMount() {
        for (let i = 0; i < 20; i++) this.handleMessage();//初始化20条
        this.timeID = window.setInterval(() => {//设置定时器
            if (this.state.messages.length > 200) {//大于200条，终止
                window.clearInterval(this.timeID);
                return;
            } else {
                this.handleMessage();
            }
        }, 500)
    }
    componentWillUnmount() {//清除定时器
        window.clearInterval(this.timeID);
    }
    getSnapshotBeforeUpdate() {//很关键的，我们获取当前rootNode的scrollHeight，传到componentDidUpdate 的参数perScrollHeight
        // console.log(this.rootNode.scrollHeight, 'this.rootNode.scrollHeight')
        return this.rootNode.scrollHeight;
    }
    componentDidUpdate(perProps: any, perState: any, perScrollHeight: number) {
        // console.log(perScrollHeight, 'perScrollHeight');
        const curScrollTop = this.rootNode.scrollTop;
        if (curScrollTop < 5) return;
        this.rootNode.scrollTop = curScrollTop + (this.rootNode.scrollHeight - perScrollHeight);
        // 加上增加的div高度，就相当于不动
    }
    render() {
        return (
            <div className='wrap' ref={node => (this.rootNode = node)} >
                { this.state.messages.map((msg, index) => <div key={index}>{msg} </div>)}
            </div>
        );
    }
}

export default SnapshotSample